<template>
  <view class="u-wrap">
    <view class="u-search-box">
      <view class="u-search-inner">
        <u-icon name="search" color="#909399" :size="28"></u-icon>
        <text class="u-search-text">搜索</text>
      </view>
      <!-- 店家名称 -->
      <view class="seller">
        <view class="s_left">
          <view class="s_img"></view>
          <view class="s_name">{{ tabbar[current].name }}</view>
        </view>
        <view class="s_change" @click="showPopup">
          切换消费点
          <view class="s_icon"></view>
        </view>
      </view>
    </view>
    <view class="u-menu-wrap">
      <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
        :scroll-into-view="itemId">
        <view v-for="(item, index) in tabbar" :key="index" class="u-tab-item"
          :class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)">
          <text class="u-line-1">{{ item.window_name }}</text>
        </view>
      </scroll-view>
      <scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box" @scroll="rightScroll">
        <view class="page-view">
          <view class="class-item" :id="'item' + index" v-for="(item, index) in tabbar" :key="index">
            <view class="item-title">
              <!-- <text>{{ item.name +3}}</text> -->
            </view>
            <view class="item-container">
              <view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1">
                <image class="item-menu-image" @click="showDelete(item1, item.sellerId)" :src="item1.icon" mode="">
                </image>
                <!-- <view class="item-menu-name">{{ item1.name }}</view> -->
                <view class="food_right">
                  <view class="f_name">{{ item1.name }}</view>
                  <view class="f_detail">{{ item1.dec }}</view>
                  <view class="f_bottom">
                    <view class="price">
                      <view class="yuan">￥</view>
                      <view class="f_price">{{ item1.price }}</view>
                    </view>
                    <view class="f_add" @click="addGoods(item1, item.sellerId, item.name, item.window)"></view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 底部购物车 -->
    <bottom_cart :orderGoods="order_goods" @addCount="addGoodsCount" @subCount="subGoodsCount" @clearCart="clearCart"
      @deleteGoods="deleteGoods"></bottom_cart>
    <!-- 消息提示框 -->
    <view>
      <up-toast ref="uToastRef" style="pointer-events: none;"></up-toast>
    </view>

    <!-- 添加消费点选择弹出层 -->
    <u-popup :show="showCanteenPopup" @close="closePopup" mode="bottom" round="10">
      <view class="popup-content">
        <view class="popup-header">
          <text>选择消费点</text>
          <u-icon name="close" @click="closePopup" size="20"></u-icon>
        </view>
        <scroll-view scroll-y class="canteen-list">
          <view v-for="(item, index) in useSchool.allCanteen" :key="index" class="canteen-item"
            :class="{ active: currentCanteenIndex === index }" @click="selectCanteen(index)">
            <text>{{ item.canteenName }}</text>
            <u-icon v-if="currentCanteenIndex === index" name="checkmark" color="#19be6b" size="16"></u-icon>
          </view>
        </scroll-view>
      </view>
    </u-popup>
  </view>
</template>


<script setup>
import { ref, onMounted, nextTick, onActivated } from 'vue';
// import classifyData from '@/pages_template/common/classify.data.js';
import classifyData from './components/order/data.js';
import bottom_cart from './components/order/bottom_cart.vue';
import useSchoolStore from '@/store/modules/school'
import { getAllFood } from '@/api/school/index'
import useUserStore from '@/store/modules/user'
import useOrderStore from '@/store/modules/user'
const userStore = useUserStore()

const useSchool = useSchoolStore()
const useOrder = useSchoolStore()

onMounted(() => {
  getMenuItemTop();
});
onActivated(() => {
  /**
   * 获取学校的所有菜品
   */
  getAllFood({ schoolId: userStore.userInfo.schoolId }).then(res => {
    console.log('res: ', res);
    if (res.code == 200) {
      useSchool.allCanteen = res.canteenData || []
      console.log('useSchool.allCanteen: ', useSchool.allCanteen || '没有数据');
      tabbar.value = addWindowName(useSchool.allCanteen[currentCanteenIndex.value].data)
    }
  });

  // 获取购物车数据
  order_goods.value = useOrder.catData
});



const scrollTop = ref(0); // tab标题的滚动条位置
const oldScrollTop = ref(0);
const current = ref(0); // 预设当前项的值
const menuHeight = ref(0); // 左边菜单的高度
const menuItemHeight = ref(0); // 左边菜单item的高度
const itemId = ref(''); // 栏目右边scroll-view用于滚动的id

const arr = ref([]);
const scrollRightTop = ref(0); // 右边栏目scroll-view的滚动条高度
const timer = ref(null); // 定时器

/**
 * 生成窗口数据
 */
const tabbar = ref([]);
function addWindowName(data) {
  // 定义一个函数，将数字转换为中文窗口名称
  function getWindowName(windowNumber) {
    // 将字符串转换为数字
    const num = parseInt(windowNumber);
    if (isNaN(num) || num < 1) {
      return '未知窗口';
    }

    // 使用中文数字数组
    const chineseNums = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十',
      '十一', '十二', '十三', '十四', '十五', '十六', '十七', '十八', '十九', '二十',
      '二十一', '二十二', '二十三', '二十四', '二十五', '二十六', '二十七', '二十八', '二十九', '三十'];

    // 数组下标从0开始，所以要减1
    return num <= chineseNums.length ? `窗口${chineseNums[num - 1]}` : '未知窗口';
  }

  // 遍历数据，为每个对象添加 window_name 属性
  return data.map(item => ({
    ...item, // 保留原有属性
    window_name: getWindowName(item.window) // 添加新属性
  }));
}
// tabbar为用于渲染的数据
// 静态数据
// tabbar.value = addWindowName(classifyData)
// 动态数据
tabbar.value = addWindowName(useSchool.allCanteen[0].data || [])


// 点击左边的栏目切换
const swichMenu = async (index) => {
  if (arr.value.length === 0) {
    await getMenuItemTop();
  }
  if (index === current.value) return;
  scrollRightTop.value = oldScrollTop.value;
  await nextTick(() => {
    scrollRightTop.value = arr.value[index];
    current.value = index;
    leftMenuStatus(index);
  });
};

// 获取一个目标元素的高度
const getElRect = (elClass, dataVal) => {
  return new Promise((resolve, reject) => {
    const query = uni.createSelectorQuery().in(this);
    query.select('.' + elClass).fields({
      size: true
    }, (res) => {
      // 如果节点尚未生成，res值为null，循环调用执行
      if (!res) {
        setTimeout(() => {
          getElRect(elClass, dataVal);
        }, 10);
        return;
      }
      dataVal.value = res.height;
      resolve();
    }).exec();
  });
};

// 观测元素相交状态
const observer = () => {
  tabbar.map((val, index) => {
    let observer = uni.createIntersectionObserver(this);
    // 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
    // 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
    observer.relativeTo('.right-box', {
      top: 0
    }).observe('#item' + index, (res) => {
      if (res.intersectionRatio > 0) {
        let id = res.id.substring(4);
        leftMenuStatus(id);
      }
    });
  });
};

// 设置左边菜单的滚动状态
const leftMenuStatus = async (index) => {
  current.value = index;
  // 如果为0，意味着尚未初始化
  if (menuHeight.value === 0 || menuItemHeight.value === 0) {
    await getElRect('menu-scroll-view', menuHeight);
    await getElRect('u-tab-item', menuItemHeight);
  }
  // 将菜单活动item垂直居中
  scrollTop.value = index * menuItemHeight.value + menuItemHeight.value / 2 - menuHeight.value / 2;
};

// 获取右边菜单每个item到顶部的距离
const getMenuItemTop = () => {
  return new Promise((resolve) => {
    let selectorQuery = uni.createSelectorQuery();
    selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
      // 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
      if (!rects.length) {
        setTimeout(() => {
          getMenuItemTop();
        }, 10);
        return;
      }
      rects.forEach((rect) => {
        // 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
        arr.value.push(rect.top - rects[0].top);
        resolve();
      });
    }).exec();
  });
};

// 右边菜单滚动
const rightScroll = async (e) => {
  oldScrollTop.value = e.detail.scrollTop;
  if (arr.value.length === 0) {
    await getMenuItemTop();
  }
  if (timer.value) return;
  if (!menuHeight.value) {
    await getElRect('menu-scroll-view', menuHeight);
  }
  setTimeout(() => { // 节流
    timer.value = null;
    // scrollHeight为右边菜单垂直中点位置
    let scrollHeight = e.detail.scrollTop + menuHeight.value / 2;
    for (let i = 0; i < arr.value.length; i++) {
      let height1 = arr.value[i];
      let height2 = arr.value[i + 1];
      // 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
      if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
        leftMenuStatus(i);
        return;
      }
    }
  }, 10);
};


/**
 * 点击添加后将商品加入购物车
 */
let order_goods = ref([])

// 方法
const uToastRef = ref(null)
const addGoods = (menu, sellerId, sellerName, window) => {

  if (!userStore.userInfo.phonenumber) {
    uni.showToast({ title: "请先在个人设置里面设置手机号码", icon: "error" })
    return
  }

  // 防止商家购买自己的餐品
  if (sellerId == userStore.userId) {
    uToastRef.value.show({
      type: 'warning',
      message: "不能购买自己的餐品哦~",
      duration: '1000',
    });
    return
  }

  let isOneSellerFood = true
  if (order_goods.value.length > 0) {
    // 是否为同一个商家的餐品
    isOneSellerFood = order_goods.value.some(item => item.sellerId === sellerId);
  }
  // 检查 order_goods 中是否已经存在具有相同 id 的商品
  const isExists = order_goods.value.some(item => item.id === menu.id);
  if (!isOneSellerFood) {
    uToastRef.value.show({
      type: 'warning',
      message: "请选择同一家商家的餐品哦~",
      duration: '1000',
    });
    return
  }
  if (!isExists) {
    // 如果不存在，则添加该商品
    order_goods.value.push({ ...menu, count: 1, showDelete: false, sellerId, sellerName, window, isMark: false });
    useOrder.catData = order_goods.value
    uToastRef.value.show({
      type: 'success',
      message: "成功添加",
      duration: '1000',
    });
  } else {
    uToastRef.value.show({
      type: 'warning',
      message: "商品已经在购物车中了哦~",
      duration: '1000',
    });
  }

}

/**
 * 商品数量的增加和减少
 */
function addGoodsCount(index) {
  order_goods.value[index].count++
  useOrder.catData = order_goods.value
}

function subGoodsCount(index) {
  if (order_goods.value[index].count <= 1) {
    uToastRef.value.show({
      type: 'warning',
      message: "至少选择一件餐品哦~",
      duration: '1000',
    });
  } else {
    order_goods.value[index].count--
    useOrder.catData = order_goods.value
  }
}

/**
 * 商品删除
 */
function deleteGoods(index) {
  order_goods.value.splice(index, 1)
  useOrder.catData = order_goods.value
}
/**
 * 清空购物车
 */
function clearCart() {
  order_goods.value = []
  useOrder.catData = order_goods.value
}

/**
 * 切换消费点
 */
// 弹出层相关
const showCanteenPopup = ref(false)
const currentCanteenIndex = ref(0)

// 显示弹出层
const showPopup = () => {
  showCanteenPopup.value = true
}

// 关闭弹出层
const closePopup = () => {
  showCanteenPopup.value = false
}
// 选择消费点
const selectCanteen = (index) => {
  currentCanteenIndex.value = index
  tabbar.value = addWindowName(useSchool.allCanteen[index].data)
  closePopup()
}

/**
 * 展示餐品详情
 */
function showDelete(item, sellerId) {
  console.log('item: ', item);
  // 跳转到商品详情页并传递餐品ID
  uni.navigateTo({
    url: `/pages/components/order/foodDetail?foodId=${item.id}&&sellerId=${sellerId}`
  })
}

</script>


<style lang="scss" scoped>
.u-wrap {
  height: calc(100vh);
  /* #ifdef H5 */
  height: calc(100vh - var(--window-top) - 100rpx);
  /* #endif */
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: $uni-bg-color-grey;
}


.u-search-box {
  // padding: 18rpx 30rpx;

  .seller {
    width: 100%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 30rpx;

    .s_left {
      display: flex;
      align-items: center;

      .s_img {
        width: 32rpx;
        height: 32rpx;
        background-image: url("@/assets/order/seller_love.svg");
        background-size: cover;
      }

      .s_name {
        font-size: 28rpx;
        color: $uni-text-color;
        font-weight: 600;
        margin-left: 6rpx;
      }
    }



    .s_change {
      display: flex;
      align-items: center;
      margin-right: 4rpx;
      color: $uni-text-color-blue;

      .s_icon {
        width: 32rpx;
        height: 32rpx;
        background-image: url("@/assets/order/arr_right.svg");
        background-size: cover;
      }
    }
  }
}

.u-menu-wrap {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.u-search-inner {
  background-color: rgb(234, 234, 234);
  border-radius: 100rpx;
  display: flex;
  align-items: center;
  padding: 10rpx 16rpx;
  margin: 6px 30rpx;
}

.u-search-text {
  font-size: 26rpx;
  color: $u-tips-color;
  margin-left: 10rpx;
}

.u-tab-view {
  width: 200rpx;
  height: 100%;
}

.u-tab-item {
  height: 110rpx;
  background: #f6f6f6;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  color: #444;
  font-weight: 400;
  line-height: 1;
}

.u-tab-item-active {
  position: relative;
  color: #000;
  font-size: 30rpx;
  font-weight: 600;
  background: #fff;
}

.u-tab-item-active::before {
  content: "";
  position: absolute;
  border-left: 4px solid $u-primary;
  height: 32rpx;
  left: 0;
  top: 39rpx;
}

.u-tab-view {
  height: 100%;
}

.right-box {
  background-color: rgb(250, 250, 250);
}

.page-view {
  padding: 16rpx;
}

.class-item {
  margin-bottom: 60rpx;
  background-color: #fff;
  padding: 16rpx;
  border-radius: 8rpx;
}

.class-item:last-child {
  min-height: 100vh;
}

.item-title {
  font-size: 26rpx;
  color: $u-main-color;
  font-weight: bold;
}

.item-menu-name {
  font-weight: normal;
  font-size: 24rpx;
  color: $u-main-color;
}

.item-container {
  display: flex;
  flex-wrap: wrap;
}

// 定义项目尺寸变量
$item-size: 130rpx;

.thumb-box {
  // width: 33.333333%;
  width: 100%;
  display: flex;
  align-items: center;
  // justify-content: center;
  // flex-direction: column;
  margin-top: 20rpx;
  padding: 10rpx;
  box-sizing: border-box;

  // 使图片容器的宽高都基于item-size变量
  .item-menu-image {
    width: $item-size;
    height: $item-size;
  }

  .item-menu-name {
    font-weight: normal;
    font-size: 24rpx;
    color: $u-main-color;
    margin-top: 10rpx;
    text-align: center;
  }

  .food_right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 20rpx;

    .f_name {
      font-size: 28rpx;
      color: $uni-text-color;
      font-weight: 600;
    }

    .f_detail {
      font-size: 24rpx;
      color: $uni-text-color-grey;
      margin: 6rpx 0;
      line-height: 30rpx;
    }

    .f_bottom {
      width: 100%;
      display: flex;
      justify-content: space-between;
      color: $uni-text-color;

      .price {
        display: flex;

        .yuan {
          font-size: 26rpx;
          font-weight: 600;
        }

        .f_price {
          font-size: 24rpx;
          margin-left: 10rpx;
          font-weight: 600;
        }
      }

      .f_add {
        width: 50rpx;
        height: 50rpx;
        background-image: url("@/assets/order/add.svg");
        background-size: cover;
      }
    }
  }
}

.item-menu-image {
  width: 120rpx;
  height: 120rpx;
}

.u-popup {
  flex: 0;
}


.popup-content {
  padding: 20rpx;

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    border-bottom: 1px solid #eee;

    text {
      font-size: 32rpx;
      font-weight: bold;
    }
  }

  .canteen-list {
    max-height: 600rpx;

    .canteen-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 20rpx;
      border-bottom: 1px solid #f5f5f5;

      text {
        font-size: 28rpx;
      }

      &.active {
        color: #19be6b;
      }
    }
  }
}
</style>
